<template>
  <div id="app">
    <!-- 占位,决定组件的显示位置 -->
    <h2>App组件</h2>
    <!-- 
      <router-link>: 该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签
        属性
          to: 用于指定跳转的路径
          tag: 可以指定<router-link>之后渲染成什么组件,比如<li>元素
          replace: replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中
          active-class: 当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称
              在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类
              但是通常不会修改类的属性,会直接使用默认的router-link-active即可
              也可以在路由对象中直接进行配置
     -->
    <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link> -->

    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 传递参数的方式一: params的类型 -->
    <!-- 在使用动态路由时,如果在路由中指定了参数,则必须带上参数的值 -->
    <!-- <router-link :to="'/user/' + userId">用户</router-link> -->
    <!-- 传递参数的方式二: query的类型 -->
    <!-- <router-link to="/profile">档案</router-link> -->
    <!-- <router-link :to="{path: '/profile',query: {name: '苏州大学', age: 18, height: 1.88}}">档案</router-link> -->

    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <!-- 
        keep-alive可以使被包含的组件保留状态或避免重新渲染 
          include: 字符串或正则表达,只有匹配的组件会被缓存
          exclude: 字符串或正则表达式,任何匹配的组件都不会被缓存
    -->
    <!-- exclude后跟的Profile是Profile组件里的name属性的值,有多个组件时中间采用逗号分隔,但是不要加空格,否则失效 -->
    <keep-alive exclude="Profile">
      <!-- 如果router-view直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存 -->
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId: 'xiaoming'
    }
  },
  methods: {
    // 通过代码修改路由
    homeClick(){
      // $router代表创建的路由对象
      // this代表当前组件
      // this.$router.push('/home')
      // 如果希望跳转后不能返回
      this.$router.replace('/home')
    },
    aboutClick(){
      // this.$router.push('/about')
      this.$router.replace('/about')
    },
    userClick(){
      this.$router.push('/user/' + this.userId) 
    },
    profileClick(){
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          heigth: 1.9
        }
      })
    }
  }
}
</script>

<style>
  .router-link-active{
    color: red
  }

  .active{
    color: red
  }
</style>
